<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 多语言旅行助手</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <h1>多语言旅行助手</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="learning.html">学习中心</a></li>
                <li><a href="translation.html">翻译</a></li>
                <li><a href="culture.html">文化知识库</a></li>
                <li><a href="map.html">离线地图</a></li>
                <li><a href="travel-plan.html">旅行计划</a></li>
                <li><a href="offline-content.html">离线内容</a></li>
                <li><a href="profile.html">个人资料</a></li>
                <li><a href="settings.html" class="active">设置</a></li>
            </ul>
        </nav>
    </header>

    <!-- 侧边导航栏 -->
    <aside class="side-nav">
        <ul>
            <li>
                <a href="index.html">
                    <img src="images/home.svg" alt="首页图标">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="learning.html">
                    <img src="images/book-open-bold.svg" alt="学习图标">
                    <span>学习</span>
                </a>
            </li>
            <li>
                <a href="translation.html">
                    <img src="images/vector_25_310.svg" alt="翻译图标">
                    <span>翻译</span>
                </a>
            </li>
            <li>
                <a href="culture.html">
                    <img src="images/globe-bold.svg" alt="文化图标">
                    <span>文化</span>
                </a>
            </li>
            <li>
                <a href="map.html">
                    <img src="images/vector_25_317.svg" alt="地图图标">
                    <span>地图</span>
                </a>
            </li>
            <li>
                <a href="offline-content.html">
                    <img src="images/vector_25_324.svg" alt="离线内容图标">
                    <span>离线</span>
                </a>
            </li>
            <li>
                <a href="settings.html" class="active">
                    <img src="images/vector_25_331.svg" alt="设置图标">
                    <span>设置</span>
                </a>
            </li>
        </ul>
    </aside>

    <!-- 内容区 -->
    <main class="content settings-content">
        <h1 class="page-title">设置</h1>
        
        <div class="settings-container">
            <div class="settings-section">
                <h2>语言与翻译</h2>
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>应用界面语言</h3>
                        <p>选择应用界面显示的语言</p>
                    </div>
                    <div class="setting-control">
                        <select id="app-language">
                            <option value="zh">中文简体</option>
                            <option value="en">English</option>
                            <option value="ja">日本語</option>
                            <option value="ko">한국어</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                        </select>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>默认源语言</h3>
                        <p>设置翻译时的默认源语言</p>
                    </div>
                    <div class="setting-control">
                        <select id="default-source-lang">
                            <option value="auto">自动检测</option>
                            <option value="zh">中文</option>
                            <option value="en">英文</option>
                            <option value="ja">日文</option>
                            <option value="ko">韩文</option>
                            <option value="fr">法文</option>
                            <option value="de">德文</option>
                        </select>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>默认目标语言</h3>
                        <p>设置翻译时的默认目标语言</p>
                    </div>
                    <div class="setting-control">
                        <select id="default-target-lang">
                            <option value="en">英文</option>
                            <option value="zh">中文</option>
                            <option value="ja">日文</option>
                            <option value="ko">韩文</option>
                            <option value="fr">法文</option>
                            <option value="de">德文</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>离线功能</h2>
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>自动下载</h3>
                        <p>当连接到Wi-Fi时自动下载和更新内容</p>
                    </div>
                    <div class="setting-control">
                        <label class="toggle-switch">
                            <input type="checkbox" id="auto-download">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>存储管理</h3>
                        <p>管理应用使用的存储空间</p>
                    </div>
                    <div class="setting-control">
                        <button id="storage-manage-btn" class="secondary-btn">管理</button>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>离线模式</h3>
                        <p>在无网络连接时自动切换到离线模式</p>
                    </div>
                    <div class="setting-control">
                        <label class="toggle-switch">
                            <input type="checkbox" id="auto-offline" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>隐私与数据</h2>
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>历史记录</h3>
                        <p>保存翻译和搜索历史</p>
                    </div>
                    <div class="setting-control">
                        <label class="toggle-switch">
                            <input type="checkbox" id="save-history" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>清除数据</h3>
                        <p>清除所有本地保存的数据</p>
                    </div>
                    <div class="setting-control">
                        <button id="clear-data-btn" class="danger-btn">清除</button>
                    </div>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>关于</h2>
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>版本</h3>
                        <p>当前应用版本</p>
                    </div>
                    <div class="setting-control">
                        <span class="version-text">1.0.0</span>
                    </div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">
                        <h3>反馈</h3>
                        <p>提交问题或建议</p>
                    </div>
                    <div class="setting-control">
                        <button id="feedback-btn" class="secondary-btn">反馈</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 多语言旅行助手 | 版本 1.0</p>
    </footer>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 加载保存的设置
            loadSettings();
            
            // 设置变更事件
            const settingInputs = document.querySelectorAll('select, input[type="checkbox"]');
            settingInputs.forEach(input => {
                input.addEventListener('change', function() {
                    saveSettings();
                });
            });
            
            // 存储管理按钮
            document.getElementById('storage-manage-btn').addEventListener('click', function() {
                window.location.href = 'offline-content.html';
            });
            
            // 清除数据按钮
            document.getElementById('clear-data-btn').addEventListener('click', function() {
                if (confirm('确定要清除所有本地数据吗？此操作无法撤销。')) {
                    clearAllData();
                }
            });
            
            // 反馈按钮
            document.getElementById('feedback-btn').addEventListener('click', function() {
                alert('反馈功能即将上线，敬请期待！');
            });
        });
        
        // 加载设置
        function loadSettings() {
            // 应用界面语言
            const appLanguage = localStorage.getItem('preferredLanguage') || 'zh';
            document.getElementById('app-language').value = appLanguage;
            
            // 默认源语言
            const defaultSourceLang = localStorage.getItem('defaultSourceLang') || 'auto';
            document.getElementById('default-source-lang').value = defaultSourceLang;
            
            // 默认目标语言
            const defaultTargetLang = localStorage.getItem('defaultTargetLang') || 'en';
            document.getElementById('default-target-lang').value = defaultTargetLang;
            
            // 自动下载
            const autoDownload = localStorage.getItem('autoDownload') === 'true';
            document.getElementById('auto-download').checked = autoDownload;
            
            // 自动离线模式
            const autoOffline = localStorage.getItem('autoOffline') !== 'false'; // 默认为true
            document.getElementById('auto-offline').checked = autoOffline;
            
            // 保存历史记录
            const saveHistory = localStorage.getItem('saveHistory') !== 'false'; // 默认为true
            document.getElementById('save-history').checked = saveHistory;
        }
        
        // 保存设置
        function saveSettings() {
            // 应用界面语言
            const appLanguage = document.getElementById('app-language').value;
            localStorage.setItem('preferredLanguage', appLanguage);
            
            // 默认源语言
            const defaultSourceLang = document.getElementById('default-source-lang').value;
            localStorage.setItem('defaultSourceLang', defaultSourceLang);
            
            // 默认目标语言
            const defaultTargetLang = document.getElementById('default-target-lang').value;
            localStorage.setItem('defaultTargetLang', defaultTargetLang);
            
            // 自动下载
            const autoDownload = document.getElementById('auto-download').checked;
            localStorage.setItem('autoDownload', autoDownload);
            
            // 自动离线模式
            const autoOffline = document.getElementById('auto-offline').checked;
            localStorage.setItem('autoOffline', autoOffline);
            
            // 保存历史记录
            const saveHistory = document.getElementById('save-history').checked;
            localStorage.setItem('saveHistory', saveHistory);
            
            // 触发设置更改事件
            const event = new CustomEvent('settingsChanged');
            document.dispatchEvent(event);
        }
        
        // 清除所有数据
        function clearAllData() {
            // 保留设置项
            const settings = {
                preferredLanguage: localStorage.getItem('preferredLanguage'),
                defaultSourceLang: localStorage.getItem('defaultSourceLang'),
                defaultTargetLang: localStorage.getItem('defaultTargetLang'),
                autoDownload: localStorage.getItem('autoDownload'),
                autoOffline: localStorage.getItem('autoOffline'),
                saveHistory: localStorage.getItem('saveHistory')
            };
            
            // 清除所有本地存储
            localStorage.clear();
            
            // 恢复设置项
            for (const [key, value] of Object.entries(settings)) {
                if (value !== null) {
                    localStorage.setItem(key, value);
                }
            }
            
            alert('所有本地数据已清除');
        }
    </script>
</body>
</html>